<template>
  <div class="imginfo-container">
    <!-- 头部区域 -->
    <h1 class="title">{{ imgInfo.title }}</h1>
    <div class="times">
      <span>发表时间：{{ imgInfo.add_time | dateFormat }}</span>
      <span>点击 {{ imgInfo.click }} 次</span>
    </div>

    <hr />

    <vue-preview :list="thumbs" :thumb-image-style="thumbImageStyle" :preview-box-style="previewBoxStyle" :tap-to-close="true" />

    <!-- 内容区域 -->
    <div class="content" v-html="imgInfo.content"></div>
    <!-- 评论区域 -->
    <my-comment :id="imgInfo.id"></my-comment>
  </div>
</template>

<script>
import comment from '~/components/comment.vue'

export default {
  layout: 'cms',
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  components: {
    'my-comment': comment
  },
  data() {
    return {
      thumbImageStyle: {
        width: '100px',
        height: '100px',
        margin: '10px',
        boxShadow: '0px 2px 3px #aaa'
      },
      previewBoxStyle: {}
    }
  },
  async asyncData({ params, $axios }) {
    // 获取图片详情
    let imgInfo = {}
    const { data: res } = await $axios.get(`/api/getimageInfo/${params.id}`)
    if (res.status === 0) {
      imgInfo = res.message[0]
    }

    // 获取缩略图数组
    let thumbs = []
    const { data: res2 } = await $axios.get(`/api/getthumimages/${params.id}`)
    if (res2.status === 0) {
      // 将服务器返回的数据，处理成【图片预览组件】需要的格式
      thumbs = res2.message.map((x) => {
        return {
          src: x.src,
          w: 600,
          h: 600
        }
      })
    }

    return {
      imgInfo,
      thumbs
    }
  }
}
</script>

<style lang="less" scoped>
.imginfo-container {
  padding: 0 3px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  color: #26a2ff;
}

.times {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: #666;
}

.content {
  font-size: 12px;
  line-height: 30px;
  text-indent: 2em;
}
</style>
